<template>
	<div
		class="goods-item"
		:class="[
			{
				'is-disabled': isGrabed
			}
		]"
	>
		<!-- 排名 -->
		<div class="goods-item__rank" v-if="!showLimit">
			<template v-if="index < 3">
				<img :src="`https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/images/million_good_top${index + 1}.png`" />
			</template>
			<div class="goods-item__rank-index" v-else-if="index > 2 && index < 10 && tabIndex == 0">
				<span>{{ index + 1 }}</span>
			</div>
		</div>
		<div class="goods-item_limit" v-else>
			<img class="goods-item_limit-tag" v-if="item.marketType == 1" src="@/assets/images/index/limit-time.png" mode="" />
			<img class="goods-item_limit-tag" v-else src="@/assets/images/index/limit-num.png" mode="" />
		</div>
		<!-- 封面 -->
		<div class="goods-item__cover">
			<img class="goods-item__cover-pic" :src="item.pic" />
			<img v-if="item.quanMLink > 0" class="goods-item__cover-tag" src="@/assets/2/images/pre-sale-tag.png" />
		</div>

		<!-- 详情 -->
		<div class="goods-item__detail">
			<div class="goods-item__title">
				<span class="iconfont icon-tianmao" v-if="item.shoptype == 1"></span>
				<span class="iconfont icon-taobao2" v-else-if="item.shoptype == 0"></span>
				<span class="goods-item__title-tag" v-else-if="item.shoptype == 10">优选</span>
				{{ item.title }}
			</div>

			<span v-if="!showLimit" class="goods-item__lave">已抢{{ item.receiveVirtualNum || 0 }}件</span>
			<div v-if="showLimit" class="limit-data">
				<div v-if="item.marketType == 1" class="limit_info">
					<span>倒计时：</span>
					<cl-countdown :datetime="dateTime" :layout="['day', 'hour', 'minute', 'second']" :splitor="[':', ':', ':']"></cl-countdown>
				</div>
				<div v-else class="limit_info limit_info-num">剩余数量：{{ item.surplus }}</div>
			</div>
			<div class="flex1"></div>

			<div class="goods-item__newcomer-price">
				补贴价
				<span class="goods-item__newcomer-price--now">{{ item | now_price }}</span>
				<span class="goods-item__newcomer-price--original">{{ item.price }}</span>
			</div>

			<div class="goods-item__footer">
				<div class="goods-item__coupon">
					<img src="@/assets/2/images/coupon-bg.png" />
					<span>{{ item.couponMoney }}元</span>
				</div>

				<div class="goods-item__grab">
					<img src="@/assets/2/images/grab-disabled-bg.png" v-if="isGrabed" />
					<img src="@/assets/2/images/grab-bg.png" v-else />

					<div class="goods-item__grab-price">
						<span>{{ item.type == 0 ? item.mdMoney : item.tljMoney }}元</span>
						<span>{{ item.type == 0 ? '首单补贴' : '补贴金' }}</span>
					</div>

					<div class="goods-item__grab-btn">
						<template v-if="item.hasBuy == 1">
							<span class="_copy-btn" :data-clipboard-span="bwbt_conf.orderConfig == 'open' ? '.' : item.tkl" @click="toCopy(true)">{{
								bwbt_conf.orderConfig == 'open' ? '立即抢' : `复制${bwbt_conf.tklTemplate}`
							}}</span>
						</template>

						<template v-else-if="isGrabed">
							<span style="color: #fff">已抢完</span>
						</template>

						<template v-else>
							<span @click="toGrab">立即抢</span>
						</template>
					</div>
				</div>
			</div>

			<!-- 已使用 -->
			<div class="goods-item__state--used" v-if="item.hasBuy == 1">
				<img src="@/assets/2/images/state-used.png" />
			</div>

			<!-- 已抢完 -->
			<div class="goods-item__state--finished" v-if="isGrabed">
				<span>已抢完</span>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { Toast } from 'vant';
import store from 'store';
import ClCountdown from '@/components/countdown';
export default {
	props: {
		item: Object,
		index: Number,
		tabIndex: Number,
		showLimit: {
			type: Boolean,
			default: false
		}
	},
	components: {
		ClCountdown
	},
	data() {
		return {
			singleProductIds: store.get('singleProductIds') || [],
			dateTime: ''
		};
	},

	filters: {
		now_price({ endPrice, mdMoney, tljMoney, hzQuanOver }) {
			return (parseFloat(endPrice || 0) - parseFloat(mdMoney || 0) - parseFloat(tljMoney || 0) - parseFloat(hzQuanOver || 0)).toFixed(2);
		}
	},

	computed: {
		...mapGetters(['bwbt_conf']),

		isGrabed() {
			if (this.item.hasBuy) {
				return false;
			}
			const isExist = this.singleProductIds.includes(this.item.id);
			return this.item.singleProduct == 1 ? (isExist ? this.item.receiveStatus > 0 : false) : this.item.receiveStatus > 0;
		}
	},

	created() {
		// this.item.id = 3;
		// this.item.receiveStatus = 1;
		// this.item.hasBuy = false;
		if (this.item.marketType == 1) {
			let date = new Date(this.item.endTime * 1000);
			let YY = date.getFullYear() + '-';
			let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			let DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			let ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			this.dateTime = YY + MM + DD + ' ' + hh + mm + ss;
			console.log(this.dateTime);
		}
	},

	methods: {
		toGrab() {
			const { title, gid, mdId } = this.item;

			Toast.loading({
				message: '加载中'
			});

			this.$service.bwbt.goods
				.dayGoodsBuy({
					...this.item,
					itemId: gid
				})
				.then(async res => {
					Toast.clear();

					this.item.hasBuy = 1;
					this.item.tkl = res;
					this.item.surplus -= 1;

					this.$store.dispatch('GET_BWBT_USERINFO');
					this.toCopy();

					if (this.bwbt_conf.orderConfig != 'open') {
						this.$emit('grab', res);
					}

					this.$emit('change', this.item);
				})
				.catch(err => {
					Toast.clear();

					if (err.message.includes('余额不足')) {
						this.$emit('ins-balance');
					} else {
						if (err.message.includes('已抢完')) {
							this.item.receiveStatus = 1;
							this.item.surplus = 0;
						}

						if (err.message.includes('您已抢购该商品')) {
							this.item.hasBuy = 1;
						}

						if (this.item.singleProduct == 1) {
							this.item.receiveStatus = 1;
							this.item.surplus = 0;

							this.addSingleProduct();

							Toast('已抢完');
						} else {
							Toast(err.message);
						}
					}

					this.$emit('change', this.item);
				});
		},

		toCopy(flag) {
			const action = this.bwbt_conf.orderConfig;
			const { tkl } = this.item;

			console.log('action', action);
			console.log('tkl', tkl);

			this.addSingleProduct();

			if (action.includes('copy')) {
				window.BestpayHtml5.System.setClipboardContent({
					data: tkl
				});

				if (flag) {
					this.$emit('copy');
				}
			}

			if (action == 'open') {
				window.BestpayHtml5.System.setClipboardContent(
					{
						data: '.'
					},
					() => {
						location.href = tkl;
					}
				);
			}
		},

		// 记录已点击的单品
		addSingleProduct() {
			this.singleProductIds.push(this.item.id);
			store.set('singleProductIds', this.singleProductIds);
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
.limit-data {
	color: #875c23;
	.limit_info {
		display: flex;
		align-items: center;

		font-size: 24px;
		text {
			margin-right: 4px;
			height: 44px;
			line-height: 44px;
		}
		/deep/.cl-countdown__number {
			background: #fef1e1 !important;
			margin: 0 4px !important;
			padding: 0 2px;
			color: #875c23;
			font-size: 24px;
		}
		&-num {
			background-color: #fef1e1;
			padding: 2px 10px;
			float: left;
		}
	}
}
</style>
